<template>
  <div>
    <HeadTag :tagName="tagName" :curTag="curTag"></HeadTag>
    <el-divider></el-divider>
    <Search :searchTable="searchTable" :showSearch="showSearch"></Search>
    <el-button type="primary" @click="getAdmin">重置</el-button>
    <el-button type="primary" @click="showAddAdmin">新增管理员</el-button>
    <Table :tHead="tHead" :tBody="tBody" :tButton="tButton"></Table>
    <!-- 修改框 -->
    <el-dialog title="修改管理员信息" align="center" :visible.sync="changeDialogVisible" width="30%">
      <el-form :model="changeForm" :rules="changeRules" ref="changeRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="编号:" prop="u_id">
          <el-input v-model="changeForm.u_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="u_account">
          <el-input v-model="changeForm.u_account"></el-input>
        </el-form-item>
        <el-form-item label="账号:" prop="u_name">
          <el-input v-model="changeForm.u_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="u_password">
          <el-input v-model="changeForm.u_password"></el-input>
        </el-form-item>
        <el-form-item label="类型:" prop="u_type">
          <el-select v-model="changeForm.u_type">
            <el-option v-for="(val,index) in u_types" :key="index" :label="val.label" :value="val.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeAdmin">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 增加框 -->
    <el-dialog title="新增学生" align="center" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名:" prop="u_account">
          <el-input v-model="addForm.u_account"></el-input>
        </el-form-item>
        <el-form-item label="账号:" prop="u_name">
          <el-input v-model="addForm.u_name"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="u_password">
          <el-input v-model="addForm.u_password"></el-input>
        </el-form-item>
        <el-form-item label="类型:" prop="u_type">
          <el-select v-model="addForm.u_type">
            <el-option v-for="(val,index) in u_types" :key="index" :label="val.label" :value="val.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tagName: [],
      curTag: '管理员管理',
      //Table属性
      tHead: [
        {
          prop: 'u_id',
          label: '编号'
        },
        {
          prop: 'u_account',
          label: '姓名'
        },
        {
          prop: 'u_name',
          label: '账号'
        },
        {
          prop: 'u_type',
          label: '类型'
        },
      ],
      tBody: [],
      tButton: [
        {
          content: '修改',
          type: 'success',
          method: this.changeRow
        },
        {
          content: '删除',
          type: 'danger',
          method: this.deleteRow
        },
      ],
      //修改框
      changeDialogVisible: false,
      changeForm: {},
      changeRules: {
        u_account: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        u_password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
      },
      u_types: [{
        label: '超级管理员',
        value: 0
      }, {
        label: '普通管理员',
        value: 1
      }],
      changeInfo: {
        u_id: '',
        u_account: '',
        u_password: '',
        u_type: ''
      },
      //搜索
      showSearch: {
        input: true,
      },
      // 新增
      addDialogVisible: false,
      addForm: {
        u_name: '',
        u_account: '',
        u_type: '',
        u_password: ''
      },
      addRules: {
        u_account: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        u_name: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        u_type: [
          { required: true, message: '请输入选择类型', trigger: 'blur' },
        ],
        u_password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
      },
    };
  },
  methods: {
    //table操作
    changeRow (row) {
      this.changeForm = JSON.parse(JSON.stringify(row))
      this.changeDialogVisible = true
    },
    deleteRow (row) {
      this.deleteAdmin(row.u_id)
    },
    async getAdmin () {
      const result = await this.$http.get('/getAdmin')
      if (result.status !== 200) return this.$message.error(result.message)
      result.data.forEach((val) => {
        if (val.u_type === 1) {
          val.u_type = '普通管理员'
        } else {
          val.u_type = '超级管理员'
        }
      })
      this.tBody = result.data
    },
    showAddAdmin () {
      this.addDialogVisible = true
    },
    addAdmin () {
      this.$refs.addRef.validate(async (valid) => {
        if (valid) {
          const result = await this.$http.post('/addAdmin', this.addForm)
          if (result.status !== 200) return this.$message.error(result.message)
          this.getAdmin()
          this.$message.success('新增成功!')
          this.addDialogVisible = false
          this.addForm = {
            u_name: '',
            u_account: '',
            u_type: '',
            u_password: ''
          }
        }
      });
    },
    deleteAdmin (id) {
      this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const result = await this.$http.post('/deleteAdmin', { u_id: id })
        if (result.status !== 200) return this.$message.error('删除失败!')
        this.getAdmin()
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    changeAdmin () {
      this.$refs.changeRef.validate(async (valid) => {
        if (valid) {
          this.changeInfo.u_id = this.changeForm.u_id
          this.changeInfo.u_account = this.changeForm.u_account
          this.changeInfo.u_password = this.changeForm.u_password
          this.changeInfo.u_type = this.changeForm.u_type
          const result = await this.$http.post('/changeAdmin', this.changeInfo)
          if (result.status !== 200) return this.$message.error('修改失败!')
          this.getAdmin()
          this.$message.success('修改成功!')
          this.changeDialogVisible = false
        }
      });
    },
    //搜索
    async searchTable (val) {
      const result = await this.$http.post('/searchAdmin', { u_account: val })
      if (result.status !== 200) return this.$message.error('查询失败!')
      if (!result.data.length) return this.$message.warning('查无此人!')
      this.tBody = result.data
      this.$message.success('查询成功')
    }
  },
  created () {
    this.$store.commit('addTag', { name: '管理员管理', router: 'admin' })
    this.tagName = this.$store.state.tagNames
    this.getAdmin()
  },
};
</script>

<style scoped>

</style>
